<template>
    <div class="personal-message">
        <div class="personal-teacher-top">
            <span class="personal-teacher-span">
                我的消息
            </span>
        </div>
        <div>
            <el-scrollbar max-height="500px">
                <div class="buffer">
                    <NoData v-if="res_message.length === 0 && !loadingFailed">
                        稍等片刻&nbsp;数据正在赶来...
                    </NoData>
                    <NoData v-if="loadingFailed">
                        加载失败&nbsp;请稍后重试
                    </NoData>
                </div>
                <div v-for="item in res_message_sort" :key="item.id">
                    <MessageRemark v-if="item.topId == 0" :remarkData="item"></MessageRemark>
                    <MessageReply v-else :replyData="item"></MessageReply>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>
  
<script setup>
import NoData from '@/components/NoData.vue';
import MessageRemark from '@/components/Personal/MyMessage/MessageRemark.vue'
import MessageReply from '@/components/Personal/MyMessage/MessageReply.vue'
import { onBeforeMount, ref, computed, watchEffect } from 'vue';
import { GetMessage } from '@/api/front/contest';
// 判断NoData是否显示
const loadingFailed = ref(false);
// 获取评论数据
const res_message = ref([]);
const userData = JSON.parse(localStorage.getItem('userInfo'));
onBeforeMount(() => {
    loadData();
});
async function loadData() {
    console.log('userId', userData.userId);
    try {
        const response = await GetMessage({ id: userData.userId });
        res_message.value = response.data; // 将获取的评论数据赋值给 ref
        console.log('父组件res_message', res_message.value);
    } catch (error) {
        console.error('Failed to get messages:', error);
        loadingFailed.value = true;
    }
}

// 根据时间排序的函数
function sortData(data) {
    return data.sort((a, b) => {
        return new Date(b.publishTime) - new Date(a.publishTime);
    });
}

// 根据时间排序的计算属性
const res_message_sort = computed(() => {
    return sortData(res_message.value);
});

// 获取别人的评论
const remarkData = ref([]);
// 获取别人对登陆人的回复
const replyData = ref([]);
// 监听 res_message 的变化，更新 remarkData
watchEffect(() => {
    console.log('res_message_sort之后', res_message_sort.value);
    remarkData.value = res_message_sort.value.filter((item) => item.topId === 0);
    console.log('remarkData.value', remarkData.value);
    replyData.value = res_message_sort.value.filter((item) => item.topId !== 0);
    console.log('replyData.value', replyData.value);
});
</script>
  
<style scoped lang="scss">
.personal-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>
  